<template>
  <div
    data-v-03dc5c01=""
    data-v-af204a3f=""
    class="relative flow_container"
    style="position: absolute; right: 33px;"
  >
    <div data-v-03dc5c01="" class="flex_fdc_aic_jcc">
      <div data-v-03dc5c01="" class="stat-center_item_center flex_aic_jcc">
        <div data-v-03dc5c01="" class="stat-center_content">
          <img
            data-v-03dc5c01=""
            class="stat-funnel_center_img"
            src=""
            alt=""
          /><span data-v-03dc5c01="" class="stat-funnel_center_img_desc"
            >{{ t('trade.下单') }}</span
          >
        </div>
        <div
          data-v-03dc5c01=""
          class="triangle_left absolute left-0 bottom-0"
        ></div>
        <div
          data-v-03dc5c01=""
          class="triangle_right absolute right-0 bottom-0"
        ></div>
      </div>
      <div data-v-03dc5c01="" class="stat-center_item_bottom flex_aic_jcc">
        <div data-v-03dc5c01="" class="stat-bottom_content">
          <img
            data-v-03dc5c01=""
            class="stat-funnel_center_img"
            src=""
            alt=""
          /><span data-v-03dc5c01="" class="stat-funnel_center_img_desc"
            >{{ t('trade.支付') }}</span
          >
        </div>
        <div
          data-v-03dc5c01=""
          class="triangle_left absolute left-0 bottom-0"
        ></div>
        <div
          data-v-03dc5c01=""
          class="triangle_right absolute right-0 bottom-0"
        ></div>
      </div>
    </div>
    <div data-v-03dc5c01="" class="stat-left_bottom_wrapper">
      <div data-v-03dc5c01="" class="stat-left_bottom_line"></div>
      <div data-v-03dc5c01="" class="stat-left_bottom_content flex_fdc_aic_jcc">
        <div data-v-03dc5c01="" class="stat-side_content_desc">
          {{ t('trade.下单支付转化率') }}
        </div>
        <div data-v-03dc5c01="" class="stat-side_content_desc">{{props.rate * 100}}%</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const props = defineProps({
  rate: {
    default: 0,
  },
});

const baseData = ref([]);
</script>
<style lang="scss" scoped>
.flow_container {
  width: 360px;
  min-width: 360;
  height: 360px;
  position: absolute;
  right: 33px;
  top: 20px;

  .stat-funnel_center_img {
    width: 20px;
    height: 20px;
  }

  .stat-funnel_center_img_desc {
    margin-left: 3px;
    color: #f5f5f5;
    font-size: 16px;
    font-weight: 600;
  }

  .stat-center_item_center {
    position: relative;
    z-index: 1;
    width: 174px;
    height: 147px;
    background: #82d3d0;
    .stat-center_content {
    }
    .triangle_left {
      border-top: 147px solid transparent;
      border-left: 33px solid rgb(253, 253, 253);
    }
    .triangle_right {
      border-top: 147px solid transparent;
      border-right: 33px solid rgb(253, 253, 253);
    }
  }

  .stat-center_item_bottom {
    position: relative;
    width: 108px;
    height: 147px;
    background: #71c4df;

    .triangle_left {
      border-top: 147px solid transparent;
      border-left: 33px solid #f5f5f5;
    }
    .triangle_right {
      border-top: 147px solid transparent;
      border-right: 33px solid #f5f5f5;
    }
  }

  .stat-left_bottom_wrapper {
    position: relative;
    .stat-left_bottom_line {
      position: absolute;
      bottom: 50px;
      left: 19px;
      width: 109px;
      height: 150px;
      border: 2px solid #b0e1c9;
      border-right: 0;
    }
    .stat-left_bottom_content {
      position: absolute;
      z-index: 1;
      bottom: 100px;
      left: -45px;
      width: 117px;
      padding: 5px 0;
      background: #8bd6b1;
      text-align: center;
    }
    .stat-side_content_desc {
      color: #fff;
      font-size: 13px;
      font-weight: 600;
    }
  }
}
</style>
